<template>
  <div class="rankv">
    <dv-scroll-board
      v-if="config.data.length > 0"
      :config="config"
      style="width:100%;height:100%"
    />
  </div>
</template>

<script>
export default {
  name: "Rank",
  data() {
    return {
      config: {
        header: [this.title, "现有确诊", "累计确诊", "死亡", "治愈"],
        data: [],
        headerBGC: "#072933",
        oddRowBGC: "#030409",
        evenRowBGC: "#030409"
      }
    };
  },
  created() {
    this.formatRankData(this.rankData);
  },
  methods: {
    formatRankData(rankData) {
      this.config.data = rankData.map(value => {
        const a =
          this.title === "国家" ? value.countryName : value.provinceShortName;
        const b = String(value.currentConfirmedCount);
        const c = String(value.confirmedCount);
        const d = String(value.deadCount);
        const e = String(value.curedCount);
        return [a, b, c, d, e];
      });
    }
  },
  props: {
    rankData: Array,
    title: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.rankv {
  height: 100%;
}
</style>
